<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0, user-scalable=no">
		<meta name="format-detection" content="telephone=no, email=no">
		<meta name="HandheldFriendly" content="true">
		<title>纯列表加载</title>
		<link rel="stylesheet" type="text/css" href="../../css/mescroll.min.css" />
		<link rel="stylesheet" type="text/css" href="../../css/comment.css" />
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				-webkit-touch-callout:none;
				-webkit-user-select:none;
				-webkit-tap-highlight-color:transparent;
			}
			body{background-color: white}
			ul{list-style-type: none}
			a {text-decoration: none;color: #18B4FE;}
			/*列表*/
			.mescroll{position: fixed;top:0px;bottom: 0;height: auto;}
			/*展示上拉加载的数据列表*/
			.data-list li{position: relative;padding: 10px 8px 10px 120px;border-bottom: 1px solid #eee;}
			.data-list .pd-img{position: absolute;left: 18px;top: 18px;width: 80px;height: 80px;}
			.data-list .pd-name{font-size: 16px;line-height: 20px;height: 40px;overflow: hidden;}
			.data-list .pd-price{margin-top: 8px;color: red;}
			.data-list .pd-sold{font-size: 12px;margin-top: 8px;color: gray;}
		</style>
	</head>

	<body>
		<div  id="mescroll" class="mescroll">
			<ul  id="dataList" class="data-list">
			</ul>
		</div>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/mescroll.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" charset="utf-8">
			$(function(){
				//创建MeScroll对象,内部已默认开启下拉刷新,自动执行up.callback,重置列表数据;
				var mescroll = new MeScroll("mescroll", {
					up: {
						page:{size:5},//每次加载1条数据,模拟loadFull
						loadFull: {
							use: true, //列表数据过少,是否自动加载下一页,直到满屏或者无更多数据为止;默认false
							delay: 500 //延时执行的毫秒数; 延时是为了保证列表数据或占位的图片都已初始化完成,且下拉刷新上拉加载中区域动画已执行完毕;
						},
						callback: getListData, //上拉回调,此处可简写; 相当于 callback: function (page) { getListData(page); }
						isBounce: false, //此处禁止ios回弹,解析(务必认真阅读,特别是最后一点): http://www.mescroll.com/qa.html#q10
						clearEmptyId: "dataList", //1.下拉刷新时会自动先清空此列表,再加入数据; 2.无任何数据时会在此列表自动提示空
						toTop:{ //配置回到顶部按钮
							src : "../../res/img/mescroll-totop.png", //默认滚动到1000px显示,可配置offset修改
							//offset : 1000
						}
					}
				});
				
				//禁止下拉刷新
				mescroll.lockDownScroll(false);
				
				/*联网加载列表数据  page = {num:1, size:10}; num:当前页 从1开始, size:每页数据条数 */
				function getListData(page){
					//联网加载数据
					getListDataFromNet(page.num, page.size, function(curPageData){
						
						//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
						//mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;
						console.log("page.num="+page.num+", page.size="+page.size+", curPageData.length="+curPageData.length);
						mescroll.endSuccess(curPageData.length);
						
						//设置列表数据,因为配置了emptyClearId,第一页会清空dataList的数据,所以setListData应该写在最后;
						setListData(curPageData);  
					}, function(){
						//联网失败的回调,隐藏下拉刷新和上拉加载的状态;
		                mescroll.endErr();
					});
				}
				
				/*设置列表数据*/
				function setListData(curPageData){
					var listDom=document.getElementById("dataList");
					for (var i = 0; i < curPageData.length; i++) {
						var pd=curPageData[i];
						
						var str='<img class="pd-img" src="'+pd.pdImg+'"/>';
						str+='<p class="pd-name">'+pd.pdName+'</p>';
						str+='<p class="pd-price">'+pd.pdPrice+' 元</p>';
						str+='<p class="pd-sold">已售'+pd.pdSold+'件</p>';
						
						var liDom=document.createElement("li");
						liDom.innerHTML=str;
						listDom.appendChild(liDom);
					}
				}
				
				
				/*联网加载列表数据
				 在您的实际项目中,请参考官方写法: http://www.mescroll.com/api.html#tagUpCallback
				 请忽略getListDataFromNet的逻辑,这里仅仅是在本地模拟分页数据,本地演示用
				 实际项目以您服务器接口返回的数据为准,无需本地处理分页.
				 * */
				function getListDataFromNet(pageNum,pageSize,successCallback,errorCallback) {
					//延时一秒,模拟联网
	                setTimeout(function () {
	                	$.ajax({
			                type: 'GET',
//			                url: '../../res/pdlist1.json',
			                url: '../../res/pdlist1.json?num='+pageNum+"&size="+pageSize,
			                dataType: 'json',
			                success: function(data){
			                	//模拟分页数据
			                	var listData=[];
								for (var i = (pageNum-1)*pageSize; i < pageNum*pageSize; i++) {
				            		if(i==data.length) break;
				            		listData.push(data[i]);
				            	}
			                	successCallback(listData);
			                },
			                error: errorCallback
			            });
	                },500)
				}
				
			});
		</script>
	</body>

</html>